<template>
    <div>
        <van-row>
          <van-col span="24">

            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <van-image
                  height="100%" 
                  :src="require('../../common/img/food1.jpg')"
                />
              </van-swipe-item>
              <van-swipe-item>
                <van-image
                height="100%" 
                  :src="require('../../common/img/food2.png')"
                />
              </van-swipe-item>
              <van-swipe-item>
                <van-image
                height="100%" 
                  :src="require('../../common/img/food6.png')"
                />
              </van-swipe-item>
              <van-swipe-item>
                <van-image
                height="100%" 
                  :src="require('../../common/img/food7.png')"
                />
              </van-swipe-item>
            </van-swipe>


            
          </van-col>
        </van-row>
        <van-row style="margin-top: 3rem;">
          <van-col span="2" offset="2">
              &nbsp;
          </van-col>
          <van-col>
            <van-cell-group inset>
            <van-cell  >
              
              <van-image
                round
                width="4rem"
                height="4rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
          
            </van-cell>
            
          </van-cell-group>
          </van-col>
      
          <van-col>
            <span style="line-height: 5rem;">{{ this.username }}</span>
          </van-col>
 

        </van-row>
        <van-row style="margin-top: 4rem;">
          <van-col span="4">
            &nbsp;
          </van-col>
          <van-col span="16">
            <van-grid :column-num="2">
              <van-grid-item   icon="photo-o" text="项目介绍" @click="toContactUs()" >
                <van-image
                  width="30"
                  height="30"
                  :src="require('../../common/img/eatfood.png')"
                />
                <p style="font-size: 10px;text-align: center;line-height: 10px;">项目介绍</p>
              </van-grid-item>
              
              <van-grid-item   icon="photo-o" text="线上点餐" @click="toFood()">
                <van-image
                  width="30"
                  height="30"
                  :src="require('../../common/img/self.png')"
                />
                <p style="font-size: 10px;text-align: center;line-height: 10px;">线上点餐</p>
              </van-grid-item>
              <van-grid-item   icon="photo-o" text="配送到家"  @click="toAddress()">
                <van-image
                  width="30"
                  height="30"
                  :src="require('../../common/img/send.png')"
                />
                <p style="font-size: 10px;text-align: center;line-height: 10px;">配送到家</p>
              </van-grid-item>
              <van-grid-item   icon="photo-o" text="充值页面" @click="sendmoney()">
                <van-image
                  width="30"
                  height="30"
                  :src="require('../../common/img/money.png')"
                />
                <p style="font-size: 10px;text-align: center;line-height: 10px;">充值有礼</p>
              </van-grid-item>
            </van-grid>
          </van-col>
          <van-col span="4">
            &nbsp;
          </van-col>
   
        </van-row>
        <Footer></Footer>
    </div>
   
</template>

<script>
  import Footer from '../../components/Footer.vue'

  export default {
       components: { Footer },
       data(){
        return{
          username:'',
        }
       },
       methods:{
       
        // 得到用户名
        getUserName(){
            this.username=localStorage.getItem('username')
          },
        //跳转到充值页面
        sendmoney(){
          this.$router.push("/sendMoney")
        },
        //跳转到地址页面
        toAddress(){
          this.$router.push("/address")
        },
        //点餐页面
        toFood(){
          this.$router.push("/orderfood")
        },
        //跳转到项目介绍
        toContactUs(){
          this.$router.push("/contactUs")
        }
       },
       mounted(){
          //调用得到用户名 
          this.getUserName()
          
       }
  }
</script>
<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    /* line-height: 16rem; */
    height: 16rem;
    text-align: center;
    background-color: #39a9ed;
  }
</style>